<template>
  <XForm ref="XForm" :formList="formList" :formData="formData">
    <template v-slot:btn>
      <XBtn :formData="formData" :XForm="$refs['XForm']" @onSubmit="onSubmit" />
    </template>

    <template v-slot:years="{ prop }">
      <el-select v-model="formData[prop][0]">
        <el-option v-for="item in yearOption" :key="item" :value="item" :disabled="item > formData[prop][1]" />
      </el-select>
      年 至
      <el-select v-model="formData[prop][1]">
        <el-option v-for="item in yearOption" :key="item" :value="item" :disabled="item < formData[prop][0]" />
      </el-select>
    </template>
  </XForm>
</template>

<script>
import { XForm } from '@/components/@fhsy/x-tool'
import XBtn from '@/components/common/XBtn'
export default {
  components: { XForm, XBtn },
  data: () => ({
    formList: [
      { label: '年份', prop: 'years', slot: 'years', xType: Array, span: 24 },
      { slot: 'btn' }
    ],
    formData: {},
    yearOption: Array.from({ length: new Date().getFullYear() - 2000 }, (v, k) => new Date().getFullYear() - k)
  }),
  methods: {
    onSubmit () {
      this.$message(`回调: ${JSON.stringify(this.formData)}`)
    }
  }
}
</script>
